---
title: <OrganizationMembersCard />
---

The `<OrganizationMembersCard />` component provides a comprehensive interface for managing organization members, including inviting new members, updating roles, and removing members.

## Usage

```tsx
import { OrganizationMembersCard } from '@daveyplate/better-auth-ui'

export function OrganizationMembersPage() {
  return (
    <OrganizationMembersCard />
  )
}
```

## Features

- **Member List**: View all organization members with their roles
- **Invite Members**: Send email invitations to new members
- **Role Management**: Update member roles (owner, admin, member, custom)
- **Remove Members**: Remove members from the organization
- **Permission Control**: Actions based on user permissions

## Reference

<AutoTypeTable path="../src/components/settings/shared/settings-card.tsx" name="SettingsCardProps" />

## Examples

### Basic Usage

```tsx
<OrganizationMembersCard />
```

### With Custom Class Names

```tsx
<OrganizationMembersCard 
  classNames={{
    base: "shadow-lg",
    cell: "hover:bg-accent",
    button: "rounded-full"
  }}
/>
```

### With Custom Localization

```tsx
<OrganizationMembersCard 
  localization={{
    MEMBERS: "Team Members",
    INVITE_MEMBER: "Add Team Member",
    OWNER: "Team Owner",
    ADMIN: "Team Admin",
    MEMBER: "Team Member"
  }}
/>
```

## Member Management Features

### Member Display
Each member shows:
- User avatar and name
- Email address
- Current role
- Actions dropdown (based on permissions)

### Role Hierarchy

1. **Owner**: Full control, can transfer ownership
2. **Admin**: Can manage members and settings
3. **Member**: Basic access
4. **Custom Roles**: Additional roles defined in configuration

### Invite Process

1. Enter email address
2. Select role for new member
3. Send invitation
4. Member receives email with invitation link
5. Member accepts invitation to join

## Permissions

Actions are permission-based:

- **Invite Members**: Requires `invitation:create` permission
- **Update Roles**: Requires `member:update` permission
- **Remove Members**: Requires `member:delete` permission

## Requirements

Enable organization plugin with proper configuration:

```tsx title="providers.tsx"
<AuthUIProvider
  authClient={authClient}
  organization={{
    customRoles: [
      { role: "developer", label: "Developer" },
      { role: "viewer", label: "Viewer" },
      { role: "billing", label: "Billing Admin" }
    ]
  }}
>
  {children}
</AuthUIProvider>
```

## Related Components

### Invite Member Dialog
- Email input with validation
- Role selection dropdown
- Send invitation with loading state

### Update Role Dialog
- Current member display
- Role selection
- Update with confirmation

### Remove Member Dialog
- Confirmation prompt
- Member details display
- Remove action with loading state

## Best Practices

1. **Role Assignment**: Assign minimal necessary permissions
2. **Regular Audits**: Review member list periodically
3. **Invitation Expiry**: Set reasonable expiration for invites
4. **Owner Protection**: Prevent accidental owner removal
5. **Clear Labels**: Use descriptive role names 